<template>
  <div>
    <el-form
      label-position="left"
      ref="addForm"
      :model="addForm"
      label-width="100px"
    >
      <el-form-item class="play" label="选择场次">
        <el-dropdown placement="bottom" @command="clickPlay">
          <el-input class="play_input" v-model="selectPlay"></el-input>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              class="drop_menu"
              v-for="(item, i) in playList"
              :key="i"
              :command="item"
              >{{ item.filmName }}
              {{ item.playOpenTime }} 场次</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="addForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="影厅名称" prop="filmEnName">
        <el-input v-model="addForm.hallName" disabled></el-input>
      </el-form-item>
      <el-form-item label="价格" prop="orderPrice">
        <el-input v-model="addForm.orderPrice"></el-input>
      </el-form-item>
      <el-form-item label="座位" prop="seat">
        <el-checkbox-group v-model="seatChecked">
          <div v-for="(item, i) in 3" :key="i">
            <span v-for="(item, j) in 3" :key="j">
              <el-checkbox
                :disabled="soldSeat(i, j)"
                :label="seatLabel(i, j)"
                border
                size="medium"
              >
              </el-checkbox>
            </span>
          </div>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="订单状态" prop="orderStatus">
        <el-dropdown placement="bottom" @command="clickStatus">
          <el-input v-model="statusText"></el-input>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="1">待支付</el-dropdown-item>
            <el-dropdown-item :command="2">已支付</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>

      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addForm: {
        hallName: "1号厅",
      },
      playList: [],
      seatList: [],
      selectPlay: "",
      seatChecked: [],
      statusText: "",
      seatLayout: [],
      playId: "",
    };
  },
  created() {
    this.getPlayList();
    let id = this.$route.query.id;
    if (id) {
      this.getOrderById(id);
    }
  },
  methods: {
    async clickPlay(command) {
      this.selectPlay = command.filmName + " " + command.playOpenTime + " 场次";
      this.addForm.filmName = command.filmName;
      this.addForm.playOpenTime = command.playOpenTime;
      this.addForm.orderPrice = command.price;
      this.playId = command.playId;
      this.getSeatList();
    },
    async getPlayList() {
      const { data: res } = await this.$http.get("filmplay/getTotleList");
      if (res.code != 200) {
        return this.$message.error(res.message);
      } else {
        this.playList = res.data;
      }
    },
    async submitForm() {
      this.addForm.orderTime = this.dateFormat(new Date());
      this.addForm.seat = this.seatChecked.join(",");
      if (this.$route.query.id) {
        this.addForm.orderId = this.$route.query.id;
        const { data: res } = await this.$http.post(
          "order/editOrder",
          this.addForm
        );
        if (res.code != 200) {
          return this.$message.error(res.message);
        } else {
          if (this.addForm.orderStatus == 2) {
            if (!this.updateSeat()) {
              return;
            }
          }

          this.$router.push("/order");
        }
      } else {
        const { data: res } = await this.$http.post(
          "order/saveOrder",
          this.addForm
        );
        if (res.code != 200) {
          return this.$message.error(res.message);
        } else {
          if (this.addForm.orderStatus == 2) {
            if (!this.updateSeat()) {
              return;
            }
          }

          this.$router.push("/order");
        }
      }
    },
    async updateSeat() {
      let data = new URLSearchParams();
      data.append("seat", this.addForm.seat);
      data.append("playId", this.playId);
      const { data: res } = await this.$http.post("seat/sellSeat", data);
      if (res.code != 200) {
        this.message.$error(res.message);
        return false;
      } else {
        return true;
      }
    },

    clickStatus(command) {
      this.addForm.orderStatus = command;
      if (command == 1) {
        this.statusText = "待支付";
      } else if (command == 2) {
        this.statusText = "已支付";
      }
    },
    seatLabel(i, j) {
      let row = i + 1;
      let col = j + 1;
      return row + "排" + col + "座";
    },
    async getSeatList() {
      const { data: res } = await this.$http.get("/seat/getList", {
        params: { id: this.playId },
      });
      console.log(res);
      if (res.code != 200) {
        return this.$message.error(res.message);
      } else {
        console.log(res.data);
        let seatList = res.data;
        let seatArray = new Array();
        for (let index = 0; index < 3; index++) {
          seatArray[index] = new Array(3);
          for (let j = 0; j < 3; j++) {
            seatArray[index][j] = "-1";
          }
        }
        console.log(seatList);
        console.log(seatArray);
        for (let index = 0; index < seatList.length; index++) {
          seatArray[seatList[index].xaxis - 1][seatList[index].yaxis - 1] =
            seatList[index].status;
        }
        console.log(seatArray);
        this.seatLayout = seatArray;
      }
    },
    soldSeat(i, j) {
      console.log(Object.keys(this.seatLayout).length);
      if (
        Object.keys(this.seatLayout).length != 0 &&
        this.seatLayout[i][j] == "1"
      ) {
        return true;
      } else {
        return false;
      }
    },
    async getOrderById(id) {
      const { data: res } = await this.$http.get("/common/order/getOrderById", {
        params: { orderId: id },
      });
      console.log(res);
      if (res.code != 200) {
        return this.$message.error(res.message);
      } else {
        this.selectPlay =
          res.data.filmName + " " + res.data.playOpenTime + "场次";
        this.seatChecked = res.data.seat.split(",");
        this.addForm = res.data;
        if (res.data.orderStatus == 1) {
          this.statusText = "待支付";
        } else if (res.data.orderStatus == 2) {
          this.statusText = "已支付";
        }
      }
    },
    dateFormat(date) {
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      // 拼接
      return year + "-" + month + "-" + day + " " + h + m + s;
    },
  },
};
</script>

<style lang="less" scoped>
.avatar {
  width: 140px;
  height: 166px;
}
/deep/.el-input__inner {
  width: 300px;
}
.el-dropdown-menu {
  width: 300px;
}
.el-checkbox {
  margin-right: 0;
}
.drop_menu {
  width: 400px;
}
.el-dropdown-menu {
  width: 400px;
}
/deep/.el-input__inner {
  width: 400px;
}
.el-checkbox {
  margin: 20px;
}
</style>
